// 月结列表
<template>
    <!-- 拟招标内容明细 -->
    <div id="detailCon" class="con">
        <div class="e-table">

             <top-step :stepInfo="steps" />

            <div class="top">
                <div class="left">
                    <div>
                        <router-link to="/revolveMonthlySettlementAdd">
                            <el-button
                                size="small"
                                style="background: #7aa818; color: #fff"
                                >新增</el-button
                            >
                        </router-link>

                    </div>
                </div>
                <div class="right">
                    <div>
                            <el-input placeholder="" size="small" v-model="pagination.keyWord"  @keydown.enter.native="fuzzySearchEnter" @blur="likeSearch">
                            <i slot="suffix" class="el-icon-search like" @click="likeSearch"></i>
                        </el-input>
                    </div>
                    <div>
                        <el-button
                            size="small"
                            style="background: #2e61d7; color: #fff"
                            >高级搜索</el-button
                        >
                    </div>
                </div>
            </div>
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                :height="tableHeight"
                class="table"
                ref="table"
               v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
            >
                <el-table-column fixed label="月结编号" min-width="250">
                       <template slot-scope="scope">
                        <span class="a" @click="tableDbShow(scope.row)">{{scope.row.billNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="settlDate" label="月结日期" width="150">
                </el-table-column>
                  <el-table-column prop="state" label="状态" width="100">
                    <template slot-scope="scope">
                       <span>{{  scope.row.state==1?'已月结':'草稿'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orgName" label="机构" min-width="250" show-overflow-tooltip>
                </el-table-column>

            </el-table>
               <ComPagination
            :total="pagination.total"
            :pageSize.sync="pagination.limit"
            :currentPage.sync="pagination.page"
            @currentChange="getTableData"
            @sizeChange="getTableData"
            :class="{ bottomSetting }"
        />
        </div>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination'
import { vueDom, debounce } from '@/utils/common.js'
import TopStep from '@/components/topstep/topstep.vue'
export default {
    components: {
        ComPagination, TopStep
    },

    data () {
        return {
            tableData: [],

            pagination: {
                total: 0,
                limit: 20,
                number: '',
                orgname: '',
                page: 1,
                states: [],
                'keyword': '',
            },
            bottomSetting: true,

            MouseEnterId: 0,
            stateArr: ['草稿', '审核中', '已审核', '已作废'],
            tableHeight: 0,
            fn: null,
            steps: [
                {
                    description: '周材验收',
                    http: '/revolveAcceptanceList'
                },
                {
                    description: '周材结算',
                    http: '/revolveAllocationList'

                },
                {
                    description: '周材月结',
                    http: '/revolveMonthlySettlementList'

                },
            ],
        }
    },
    created () {
        this.getTableData()
    },

    computed: {
        statusLable () {
            return param => {
                const state = this.$store.state.equip.equipData.state
                const obj = state.find(x => x.value == param)
                if (obj !== undefined) {
                    return obj.label
                }
            }
        }
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 240
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 240
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        getTableData () {
            this.$Ajax
                .httpPost({
                    url: '/turnover/rmonthlySettlement/listByEntity',
                    params: this.pagination
                })
                .then(res => {
                    this.tableData = res.list
                    this.pagination.total = res.totalCount
                })
        },
        //回车键查询
        fuzzySearchEnter (e) {
            if(e.keyCode == 13) {
                this.getTableData()
            }
        },
        //模糊查询
        likeSearch () {
            this.getTableData()
        },
        //点击进入查看页面
        tableDbShow (row) {
            const billid = row.billId
            this.$router.push({
                path: '/revolveMonthlySettlementEdit',
                query: { billid }
            })
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },

        clickEdit (billid) {
            this.$router.push({ path: '/revolveMonthlySettlementEdit', query: { billid } })
        }
    }
}
</script>
<style lang="scss" scoped>
#iconEdit:hover {
    color: red;
}
.e-table {
    min-height: 97.3vh;
}
</style>
